.filter-header{
  margin-top: px2rem(54px);
  width: 100%;
  background-color: #fff;
  .header-top{
    display: flex;
    position: fixed;
    width: 100%;
    display: flex;
    height: px2rem(40px);
    align-items: center;
    border-bottom: 1px solid #e4e4e4;
    background-color: #fff;
    z-index: 4;
    .item{
      font-size: px2rem(13px);
      color: #2f2f2f;
      border-right: 1px solid #ddd;
      flex: 1;
      text-align: center;
      position: relative;
      &:last-child{
        border: none;
      }
      &.cate::after, &.type::after{
        content: "";
        display: inline-block;
        position: absolute;
        width: px2rem(5px);
        height: px2rem(5px);
        border: 1px solid #666;
        border-width: 0 1px 1px 0;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        top: px2rem(2px);
        margin-left: px2rem(6px);
        -webkit-transition: 0.3s;
        transition: 0.3s;
      }
      &.filter:after {
        content: '';
        display: inline-block;
        width: px2rem(12px);
        height: px2rem(12px);
        transform: rotate(0);
        background-image: url('./img/filter.png');
        background-size: cover;
        margin-left: px2rem(2px);
      }
      &.current:not(.filter)::after {
        transform: rotate(225deg);
        -webkit-transform: rotate(225deg);
      }
      &:before {
        display: none;
        content: '';
        position: absolute;
        top: px2rem(23px);
        left: 49%;
        width: px2rem(7px);
        height: px2rem(7px);
        background-color: #fff;
        border: 1px solid #e4e4e4;
        border-width: 0 1px 1px 0;
        transform: rotate(225deg);
        -webkit-transform: rotate(225deg);
      }
      &.cate:before {
        background-color: #fff;
      }
      &.current:before {
        display: block;
      }
    }
  }
  .panel {
    position: absolute;
    z-index: 1;
    left: 0;
    top: px2rem(94px);
    bottom: 0;
    right: 0;
    background-color: rgba(0,0,0,0.7);
    display: none;
    &.show{
      display: block;
    }
    .panel-inner{
      position: static;
      width: 100%;
      height: 300px;
      overflow-x: hidden;
      overflow-y: auto;
      -webkit-overflow-scrolling:touch;
      background-color: #fff;
      > ul {
        background: #fff;
      }
    }
  }
  .item-title{
    position: relative;
    font-size: px2rem(12px);
    height: px2rem(30px);
    background-color: #efefef;
    line-height: px2rem(30px);
    color: #666;
    padding-left: px2rem(13px);
    z-index: 6;
    &:before {
      content: '';
      position: absolute;
      display: block;
      margin-left: -12px;
      width: px2rem(2px);
      height: px2rem(30px);
      background-color: #ffd161;
    }
  }

  .item-content {
    min-height: px2rem(20px);
  }
  .cate-box {
    float: left;
    width: 33.33%;
    font-size: px2rem(12px);
    padding: px2rem(10px);
    box-sizing: border-box;
    .cate-box-inner{
      border: 1px solid #e6e3e3;
      text-align: center;
      color: #666;
      height: px2rem(37px);
      line-height: px2rem(37px);
      position: relative;
      &.active {
        background-color: #fffbf1;
        color: #ffb000;
        border-color: #ffb000;
      }
    }
  }
  .type-panel{
    .type-item{
      border-bottom: 1px solid #e9e9e9;
      height: px2rem(44px);
      font-size: px2rem(13px);
      color: #666;
      line-height: px2rem(44px);
      padding-left: px2rem(20px);
      &.active{
        color:  #ffb000;
      }
    }
  }
  .filter-panel{
    .filter-item{
      margin-bottom: px2rem(10px);
      margin-top: px2rem(5px);
      padding-left: px2rem(5px);
      padding-right: px2rem(5px);
        .filter-title {
        color: #999;
        font-size: px2rem(12px);
        padding-left: px2rem(14px);
      }
    }
  }
  .has-icon{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .has-icon img{
    display: inline-block;
    width: px2rem(17px);
    height: px2rem(17px);
  }



}
